<template>
    <!-- 退单 -->
    <div>
        <el-dialog
            title=""
            width="70%"
            center
            :visible.sync="refundOrderShow"
            @close="closeRefundOrder">
            <div class="refundOrder-box">
                <h1>退款申请</h1>
                <el-row>
                    <el-col :span="8">订单号:{{refundOrderData.studentBigcOrderInfoVO.orderChildNo}}</el-col>
                    <el-col :span="16">商品名称：{{refundOrderData.orderGoods.name}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">年级学科:{{refundOrderData.orderGoods.gradeNameList.join(',')}}--{{refundOrderData.orderGoods.specialtyNameList.join(',')}}</el-col>
                    <el-col :span="8">商品价格级别：{{refundOrderData.studentBigcOrderInfoVO.goodsPriceLevelName}}</el-col>
                    <el-col :span="8">班型：{{refundOrderData.studentBigcOrderInfoVO.klassType}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">支付时间：还没提供字段</el-col>
                    <el-col :span="8">下单人：{{refundOrderData.studentBigcOrderInfoVO.createPeople}}</el-col>
                    <el-col :span="8">支付方式：{{refundOrderData.studentBigcOrderInfoVO.payMode}}</el-col>
                </el-row>
            </div>
            <div class="refundOrder-box-jiesuan">               
                <div class="title">
                    <h1>商品结算：</h1>
                </div>
                <Crm-table
                    class="table-width"
                    :showOverflowTooltip='false'
                    :showOperation='false'
                    width="400"
                    :order='false'
                    :data="jiesuan"
                    :columns="refundOrderData.studentBigcOrderInfoVO.type==1?columns:columns2"
                    :border='true'
                    :loading="loading"
                ></Crm-table>
            </div>
            <div class="refundOrder-box-jiesuan">
                <div class="title">
                    <h1>商品使用：</h1>
                    <el-button type='text'>导出课表</el-button>
                </div>
                <Crm-table
                    class="table-width"
                    :showOverflowTooltip='false'
                    :showOperation='false'
                    width="400"
                    :order='false'
                    :data="use"
                    :columns="refundOrderData.studentBigcOrderInfoVO.type==1?columns3:columns4"
                    :loading="loading"
                    :border='true'
                ></Crm-table>
            </div>
            <div class="realRefund">
                <p>可退款：<span>￥{{ktdj*ktClass}}元 {{ktClass}}课时</span></p>
            </div>
            <el-divider></el-divider>
            <div class="realRefund-box">
                <h4 style="font-size:20px;font-weight:bold">实际退款</h4>
                <el-row class="mt20">
                    <el-col :span='8'>     
                        <el-row>
                            <el-col :span="5" class="mt10">退课时数：</el-col>
                            <el-col :span="5"><el-input v-model='tkNum' @blur="tkNumBlur"></el-input></el-col>
                            <el-col :span="3" class="mt10">课时</el-col>
                        </el-row>
                    </el-col>
                    <el-col :span='8'>
                        <el-col :span="8" class="mt10">退赠送课时数：</el-col>
                            <el-col :span="5">
                            <el-input v-model="tkFreeNum" @blur="tkFreeNumBlur"></el-input></el-col>
                            <el-col :span="3" class="mt10">课时</el-col>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span='8'>     
                        <el-row>
                            <el-col :span="5" class="mt10">退款总金额:</el-col>
                            <el-col :span="5" class="mt10">{{tkNum*ktdj}}</el-col>
                            <el-col :span="3" class="mt10">元</el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span='8'>     
                        <el-row>
                            <el-col :span="5" class="mt10"></el-col>
                            <el-col :span="5" class="mt10">退款优惠券：</el-col>
                            <el-col :span="3" class="mt10">---</el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class="mt10" style="text-align:left">
                    <el-col :span='8'>     
                        <el-row>
                            <el-col :span="5" class="mt10"></el-col>
                            <el-col :span="5" class="mt10">退现金：</el-col>
                            <el-col :span="3" class="mt10">￥{{tkNum*ktdj}}</el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span='8'>     
                        <el-row>
                            <el-col :span="6" class="mt10">上传审批证明：</el-col>
                            <el-col :span="13" class="mt10">
                                <el-upload
                                    class="avatar-uploader"
                                    :action="upLoadUrl"
                                    :show-file-list="false"
                                    accept=".jpg, .png"
                                    :limit="1"
                                    :on-success="handleAvatarSuccess"
                                    :with-credentials="true"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="tkData.imagePath" :src="tkData.imagePath" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class="mt10" style="text-align:left">
                    <el-col :span='10'>     
                        <el-row>
                            <el-col :span="6" class="mt10">退款原因：</el-col>
                            <el-col :span="9" class="mt10">
                                <el-select v-model="tkData.reasonType" placeholder="请选择">
                                    <el-option
                                    v-for="item in reasonType"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.key">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="9" class="mt10">
                                <el-select v-model="tkData.reasonSubType" placeholder="请选择">
                                    <el-option
                                    v-for="item in reasonSubType"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="10" style="text-align:left">
                        <el-col :span="6">退款详细说明：</el-col>
                        <el-col :span="18">
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="tkData.reason">
                                </el-input>
                        </el-col>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button :size="size" @click="closeRefundOrder">取 消</el-button>
                <el-button :size="size" type="primary" @click="saveOrder">提交退款申请</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import CrmTable from "@/views/Core/CrmTable";
import { baseUrl } from "@/utils/global";
export default {
    name:'RefundOrder',
    props:{
        refundOrderShow:Boolean,
        refundOrderData:Object,
    },
    components:{
        CrmTable
    },
    data() {
        return {   
            size:'mini', 
            jiesuan:{
                content: [

                ]
            },
            use:{
                content: [
                    {
                        type:'金额（元）',
                        yuanjia:2000,
                        goodsRealPrice:2000,
                        goodsDiscountPrice:10,
                        yuenfei:10,
                        zongjia:1510,
                        yuenfei2:10,
                        xuebi:90,
                        shuijing:50,
                        youhuiquan:10,
                        shifuk:1350
                    }
                ]
            },
            columns:[
                { prop: "type", label: "类型", minWidth: 100 },
                { prop: "kdj", label: "课单价", minWidth: 100 },
                { prop: "gmks", label: "购买课时数", minWidth: 100 },
                { prop: "zsks", label: "赠送课时数", minWidth: 100 },
                { prop: "spzj", label: "商品总价", minWidth: 100 },
                { prop: "sjdk", label: "水晶抵扣", minWidth: 100 },
                { prop: "yhq", label: "优惠券", minWidth: 100 },
                { prop: "sfk", label: "实付款", minWidth: 100 },
            ],
            columns2:[
                { prop: "type", label: "类型", minWidth: 100 },
                { prop: "yuanjia", label: "原价", minWidth: 100 },
                { prop: "goodsRealPrice", label: "现价", minWidth: 100 },
                { prop: "goodsDiscountPrice", label: "限时促销价", minWidth: 100 },
                { prop: "yuenfei", label: "运费", minWidth: 100 },
                { prop: "zongjia", label: "商品总价", minWidth: 100 },
                { prop: "yuenfei2", label: "运费减免", minWidth: 100 },
                { prop: "xuebi", label: "学币抵扣", minWidth: 100 },
                { prop: "shuijing", label: "水晶抵扣", minWidth: 100 },
                { prop: "youhuiquan", label: "优惠券", minWidth: 100 },
                { prop: "shifuk", label: "实付款", minWidth: 100 },
            ],
            columns3:[
                { prop: "type", label: "类型", minWidth: 100 },
                { prop: "yuanjia", label: "订单总课时数", minWidth: 100 },
                { prop: "goodsRealPrice", label: "已消耗课时数", minWidth: 100 },
                { prop: "goodsDiscountPrice", label: "剩余总课时数", minWidth: 100 },
                { prop: "goodsDiscountPrice", label: "剩余购买课时数", minWidth: 100 },
                { prop: "goodsDiscountPrice", label: "剩余赠送课时数", minWidth: 100 },
                { prop: "yuenfei", label: "学习状态", minWidth: 100 },
            ],
            columns4:[
                { prop: "type", label: "类型", minWidth: 100 },
                { prop: "yuanjia", label: "总课时数/讲数", minWidth: 100 },
                { prop: "goodsRealPrice", label: "已上课", minWidth: 100 },
                { prop: "goodsDiscountPrice", label: "未上课", minWidth: 100 },
                { prop: "yuenfei", label: "学习状态", minWidth: 100 },
            ],
            loading:false,
            ktdj:'',
            ktClass:'',
            tkNum:'',
            tkFreeNum:'',
            tkData:{
                imagePath:''
            },
            upLoadUrl:baseUrl+'/mediaInfo/upload',
            dominIMGUrl:JSON.parse(localStorage.getItem('dominIMGUrl')),
            reasonType:[
                {
                    value:'学生原因',
                    key:'1' 
                },
                {
                    value:'老师原因',
                    key:'2' 
                },
                {
                    value:'其他原因',
                    key:'3' 
                },
            ],
            reasonSubType:[
                {
                    value:'转线下',
                    key:'1' 
                },
                {
                    value:'出国',
                    key:'2' 
                },
                {
                    value:'不适应线上',
                    key:'3' 
                },
            ],
        };
    },
    created() {
        let arry=[]
        if(this.refundOrderData.studentBigcOrderInfoVO.type==1){
            this.jiesuan.content.push({
                type:'金额/课时',
                kdj:this.refundOrderData.studentBigcOrderInfoVO.perPrice,
                gmks:this.refundOrderData.studentBigcOrderInfoVO.o2oLessonHour,
                zsks:this.refundOrderData.studentBigcOrderInfoVO.o2oFreeLessonHour,
                spzj:this.refundOrderData.studentBigcOrderInfoVO.goodsRealPrice,
                sjdk:'--',
                yhq:'--',
                sfk:this.refundOrderData.studentBigcOrderInfoVO.price
            })
        }
    },
    methods:{
        closeRefundOrder(){
            this.$emit('closeRefundOrder')
        },
        queryRefundLessonHour(){
            //  获取订单可退课时 
            this.$api.student
            .queryRefundLessonHour({
                goodsSnapshotId:this.refundOrderData.studentBigcOrderInfoVO.goodsSnapshotId,
                orderGoodsSno:this.refundOrderData.studentBigcOrderInfoVO.orderChildNo
            })
            .then(res => {
                if (res.result == 2) {
                    this.$message({ message: res.msg, type: 'error' });
                } else {
                    this.ktClass=res.data
                }
            });
        },
        queryOrderPerPrice(){
            this.$api.student
            .queryOrderPerPrice({
                goodsSnapshotId:this.refundOrderData.studentBigcOrderInfoVO.goodsSnapshotId
            })
            .then(res => {
                if (res.result == 2) {
                    this.$message({ message: res.msg, type: 'error' });
                } else {
                    this.ktdj=res.data
                }
            });
        },
        tkNumBlur(){
            if(this.tkNum>this.refundOrderData.studentBigcOrderInfoVO.o2oLessonHour){
                this.$message({ message: '退课时数应小于购买课时数！', type: 'error' });
                this.tkNum=''
            }
        },
        tkFreeNumBlur(){
            if(this.tkFreeNum>this.refundOrderData.studentBigcOrderInfoVO.o2oFreeLessonHour){
                this.$message({ message: '退赠送课时数应小于赠送课时数！', type: 'error' });
                this.tkFreeNum=''
            }
        },
        handleAvatarSuccess(res, file) {
            this.tkData.imagePath=this.dominIMGUrl+'/'+res.msg;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg/"||"image/png";
            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
            }
            return isJPG
        },
        saveOrder(){
            console.log(this.tkData)
            this.$api.student
            .orderRefund({
                freeLessonHour:this.refundOrderData.studentBigcOrderInfoVO.o2oFreeLessonHour,//赠送课时
                goodsSnapshotId:this.refundOrderData.studentBigcOrderInfoVO.goodsSnapshotId,
                imagePath:this.tkData.imagePath,
                // lessonHour:this.refundOrderData.studentBigcOrderInfoVO.o2oLessonHour,//购买课时
                lessonHour:this.tkNum,//要退的课时数
                lessonHourCount:this.ktClass,//可退的课时数
                orderGoodsSno:this.refundOrderData.studentBigcOrderInfoVO.orderChildNo,//子订单号
                orderSno:this.refundOrderData.studentBigcOrderInfoVO.orderNo,//总订单号
                orderType:this.refundOrderData.studentBigcOrderInfoVO.orderType,//订单类型
                price:this.tkNum*this.ktdj,//退单金额
                reasonType:this.tkData.reasonType,
                reasonSubType:this.tkData.reasonSubType,
                userId:this.refundOrderData.studentBigcOrderInfoVO.userId,
                orderType:this.refundOrderData.studentBigcOrderInfoVO.orderType,
                reason:this.tkData.reason,
                organizationCode:this.refundOrderData.studentBigcOrderInfoVO.organizationCode
            })
            .then(res => {
                if (res.result == 2) {
                    this.$message({ message: res.msg, type: 'error' });
                } else {
                    this.$message({ message: res.msg, type: 'success' });
                    this.closeRefundOrder()
                }
            });
        }
    },
    mounted() {
        this.queryRefundLessonHour()
        this.queryOrderPerPrice()
    }
};
</script>

<style lang="scss">
.refundOrder-box{
    text-align: left;
    h1{
        font-size: 18px;
        font-weight: bold;
    }
    .el-row{
        margin: 10px 0;
    }
}
.refundOrder-box-jiesuan{
    .title{
        text-align: left;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
    }
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
